<div class="ane-select form-control"
    :class="[(@isMultiple ? 'ane-select-multiple' : '')]"
    :css="{width:@width}"
    :click="@handleClick"
    role="combobox"
    aria-autocomplete="list"
    aria-haspopup="true"
    :attr="{'aria-expanded': @panelVisible + ''}">
    <ul class="ane-select-selection" :class="[(@isMultiple ? 'ane-select-tags' : '')]">
        <li class="ane-select-selected" :visible="!@isMultiple && (!@showSearch || !@panelVisible)">{{@displayValue}}</li>
        <li class="ane-select-choice" :for="choice in @selection">
            <span>{{choice.label}}</span>
            <i class="fa fa-times" :click="@removeSelection($event, choice) | stop"></i>
        </li>
        <li class="ane-select-search">
            <input class="ane-select-search-field"
                name="search"
                type="text"
                autocomplete="off"
                :duplex="@searchValue"
                :css="{visibility:(@showSearch && @panelVisible)?'visible':'hidden'}"
                :keydown="@handleDelete" />
        </li>
    </ul>
    <i :if="!mouseIn" class="fa ane-select-arrow"
        :class="[(@panelVisible ? 'fa-caret-up' : 'fa-caret-down')]"
        :visible="@mode === ''"></i>
    <i ms-visible="mouseIn" id="clearBtn" class="clear-btn glyphicon glyphicon-remove-circle ane-select-arrow"
       :click="clearValue"
    ></i>
    <ms-trigger :widget="{
        width: @panelWidth,
        visible: @panelVisible,
        direction: @direction,
        innerVmId: @panelVmId,
        innerClass: @panelClass,
        innerTemplate: @panelTemplate,
        withInBox: @withInBox,
        getTarget: @getTarget,
        onHide: @handlePanelHide}">
    </ms-trigger>
</div>
